<html xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org">
<head>
<title tiles:fragment="title">Chat</title>
</head>
<body>
	<div tiles:fragment="content">
		<div class="container">
			<div class="row">
				<div class="row">
					<div id="heading" class="masthead">
						<h3 class="muted">Chat Application</h3>
					</div>
					<div class="alert alert-warning">
						<h5>Notifications</h5>
						<ul data-bind="foreach: notifications">
							<li data-bind="text: notification"></li>
						</ul>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-9 ">
						<div class="panel panel-default" id="history">
							<div class="panel-heading">
								Chat with <span class="text-primary"
									data-bind="text: conversation().to().username"></span>
							</div>
							<div id="chat" class="pre-scrollable"
								style="height: 0px; padding-bottom: 30%; padding-left: 5px; padding-right: 5px;"
								data-bind="foreach: conversation().messages()">
								<div
									data-bind="template: { name: $root.conversation().layoutTemplate($index), data: $data }"></div>
							</div>
							<form class="form-horizontal"
								data-bind="submit: conversation().send">
								<div class="input-group">
									<input type="text" class="form-control"
										data-bind="value: conversation().draft"
										placeholder="plean entrer." /> <span class="input-group-btn">
										<button class="btn btn-primary" type="submit">Send!</button>
									</span>
								</div>
							</form>
						</div>
					</div>
					<div class="col-xs-3">
						<div class="panel panel-default">
							<div class="panel-heading">customer list</div>
							<div class="panel-body">
								<div class="list-group" data-bind="foreach: friends()">
									<a class="list-group-item"
										data-bind="click: $root.conversation().chat, css: profitStatus()"><span
										class="badge" data-bind="text: messageCount()"></span> <!--ko text: username-->
										<!--/ko--></a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!-- 3rd party -->
		<script src="resources/js/jquery/jquery.min.js"></script>
		<script src="resources/js/bootstrap/js/bootstrap.min.js"></script>
		<script src="resources/js/sockjs/sockjs.js"></script>
		<script src="resources/js/stomp/lib/stomp.js"></script>
		<script src="resources/js/knockout/knockout.js"></script>
		<!-- application -->
		<script src="resources/js/service.js"></script>
		<script type="text/html" id="left-begin">
        <div class="caption text-left">
            <h4 class="text-primary">
                <!--ko text: from--><!--/ko-->
                <small data-bind="text: timeFormat()"></small>
            </h4>
            <p style="margin-left:20px;" data-bind="text: message"></p>
        </div>
        </script>
		<script type="text/html" id="left-continue">
        <div class="caption text-left">
            <p style="margin-left:20px;" data-bind="text: message"></p>
        </div>
        </script>
		<script type="text/html" id="right-begin">
        <div class="caption text-right">
            <h4 class="text-primary">
                <!--ko text: from--><!--/ko-->
                <small data-bind="text: timeFormat()"></small>
            </h4>
            <p style="margin-right:20px;" data-bind="text: message"></p>
        </div>
        </script>
		<script type="text/html" id="right-continue">
        <div class="caption text-right">
            <p style="margin-right:20px;" data-bind="text: message"></p>
        </div>
        </script>
		<script type="text/javascript">
			$(function() {
				var socket = new SockJS('/chat/chat');
				var stompClient = Stomp.over(socket);

				var appModel = new ServiceModel(stompClient);
				ko.applyBindings(appModel);

				appModel.connect();
			});
		</script>
	</div>
</body>
</html>